<template>
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in data" :key="item.proid">
        <img :src="item.img1" alt="">
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper/dist/js/swiper.js';
import 'swiper/dist/css/swiper.css'

export default {
  props: {
    data: Array
  },
  mounted() {
    setTimeout(() => {
      this.$nextTick().then(() => {
        new Swiper('.swiper', {
          autoplay: true,
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
        })
      })
    }, 500)
  }
}
</script>

<style>
.swiper {
  position: relative;
}

.swiper-pagination .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  background: cyan !important;
  opacity: 1;
}

.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #f60 !important;
}

.swiper-slide img {
  width: 100%
}
</style>